<template>
  <!-- 活动打卡页面 -->
  <div class="box">
    <van-list
      v-model="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="false"
      finished-text="我是有底线的"
      @load="onLoadlist"
    >
      <div style="height:15px;background: #f8f8fa"></div>
      <div
        v-for="(it,i) in organizer"
        :key="i+'info--'"
      >
        <div :class="it.image!=''||it.image!=null?'attendance_hidden':'attendance_img'">
          <img
            style="width:100%;height:100%"
            :src="it.image"
          >
        </div>
        <div
          class="attendance_top clearfix"
          @click="show_clock(it)"
        >
          <i style="font-size:17px">{{it.name}}</i>
          <p style="margin:10px 0px"><i>{{it.description}}</i></p>

          <div class="foot">
            <span
              class="left"
              style="color:#5C97F6"
            >组织者</span>
            <span class="right"><span>开始时间：{{it.start_time}}</span><br /><span>活动地点：<i v-if="it.place==''">暂时未定</i><i v-else>{{it.place}}</i></span></span>
          </div>
        </div>
      </div>
      <div
        v-for="(item,j) in confirm"
        :key="j+1"
        class='confirm'
      >
        <div :class="item.image!=''||item.image!=null?'attendance_hidden':'attendance_img'">
          <img
            style="width:100%;height:100%"
            :src="item.image"
          >
        </div>
        <div
          class="attendance_top clearfix"
          @click="show_clock(item)"
        >
          <i style="font-size:17px">{{item.name}}</i>
          <p style="margin:10px 0px"><i>{{item.description}}</i></p>

          <div class="foot">
            <span
              class="left"
              style="color:red"
            >未签到</span>
            <span class="right"><span>开始时间：{{item.start_time}}</span><br /><span>活动地点：<i v-if="item.place==''">暂时未定</i><i v-else>{{item.place}}</i></span></span>
          </div>
        </div>
      </div>
      <div
        v-for="(ul,k) in confirmed"
        :key="k+'info'"
        class="confirmed"
      >
        <div :class="ul.image!=''||ul.image!=null?'attendance_hidden':'attendance_img'">
          <img
            style="width:100%;height:100%"
            :src="ul.image"
          >
        </div>
        <div
          class="attendance_top clearfix"
          @click="show_clock(ul)"
        >
          <i style="font-size:17px">{{ul.name}}</i>
          <p style="margin:10px 0px"><i>{{ul.description}}</i></p>

          <div class="foot">
            <span
              class="left"
              style="color:#0b62ee"
            >已签到</span>
            <span class="right"><span>开始时间：{{ul.start_time}}</span><br /><span>活动地点：<i v-if="ul.place==''">暂时未定</i><i v-else>{{ul.place}}</i></span></span>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      list: [],
      loading: false, // 上拉加载
      finished: false, // 上拉加载完毕
      offset: 100, // 滚动条与底部距离小于 offset 时触发load事件
      pageSize: 5, // 每页条数
      pageIndex: 1, // 页码
      page: 0,
      organizer: [],
      confirm: [],
      confirmed: []
    };
  },
  created() {
    this.getList(0, 0);
    dd.biz.navigation.setTitle({
        title: "活动打卡" //控制标题文本，空字符串表示显示默认文本
      });
  },
  methods: {
    // 跳转详情页
    show_clock(it) {
      this.$router.push({
        path: "/clock",
        query:{
          id:it.id
        }
      });
    },
    show_div() {},
    // 加载
    onLoadlist() {
      this.getList(this.confirm.length, this.confirmed.length);
      this.pageIndex++;
    },
    async getList(confirm, confirmed) {
         let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      let userId = localStorage.getItem("userId");
      const res = await this.$http
        .get(
          `yuepoints/activity/list?corpId=${corpId}&userId=${userId}&confirm=${confirm}&confirmed=${confirmed}`
        )
        .then(res => {
        const { data } = res.data;
          this.$forceUpdate();
          if (data.length === 0 || data === null) {
            this.finished = true;
            return;
          }
          if (data.confirm.length+data.confirmed.length < this.pageSize) {
             this.finished = true;
          }
          if (this.pageIndex === 1) {
            this.confirm = data.confirm;
            this.confirmed = data.confirmed;
            this.organizer = data.organizer;
          } else {
            this.confirm = this.confirm.concat(data.confirm);
            this.confirmed = this.confirmed.concat(data.confirmed);
            this.organizer = this.organizer.concat(data.organizer);
          
          }
       
        })
        .catch(error => {
          
        })
        .finally(() => {
          this.loading = false;
        });

     
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  // width: 90%;
  // padding: 10px auto;
  margin-bottom: 55px;
  background: #f8f8fa;
  i {
    font-style: normal;
  }
  p {
    margin: 0px;
    padding: 0px;
  }
  .attendance_hidden {
    display: none;
  }
  .attendance_img {
    margin: 0px 15px;
    // background: #00f3ff99;
    height: 150px;
  }
  .attendance_top {
    margin: 0px 15px;
    background: #fff;
    box-shadow: 0px 9px 4px 0px rgba(0, 42, 105, 0.05);
    border-radius: 5px;
    text-align: left;
    font-size: 16px;
    padding: 10px 15px;
    margin-bottom: 10px;

    .color {
      color: rgb(7, 173, 110);
    }
    .color1 {
      color: red;
    }

    .foot {
      font-size: 13px;
      // color: rgb(7, 173, 110);
      margin-top: 5vh;
    }
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .clearfix::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .clearfix {
    zoom: 1;
  }
}
</style>
